<template>
  <view class="month">
    <view class="year">
      <text class="year-li" v-for="item in getYear" :key="item" @click="onYear(item)" :class="{ cur: year === item }">{{ item }}</text>
    </view>
    <view class="month-con">
      <text class="month-con__text" v-for="item in monthArr" :key="item" @click="onMonth(item)" :class="{ cur: month === item }">{{
        item
      }}</text>
    </view>
    <view class="month-count"
      >{{ month }}月新番，共<text class="month-count__b">{{ list.length }}</text
      >条</view
    >
    <Item :datalist="list" v-if="list.length" />
    <Loading :status="loading ? 'loading' : ''" v-if="loading" />
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Item from '@/components/Item/list2v3.vue'
import Loading from '@/components/Loading'
export default {
  data() {
    return {
      list: [],
      monthArr: [],
      year: 0,
      month: '',
      loading: false
    }
  },
  computed: {
    getYear() {
      const d = new Date()
      const start = d.getFullYear() - 18
      const s = d.getFullYear() - start
      let y = []
      for (let i = 0; i <= s; i++) {
        y.push(start + i)
      }
      return y.reverse()
    }
  },
  methods: {
    ...mapActions('list', ['getMonth']),
    getData() {
      this.loading = true
      this.getMonth({
        month: this.month
      }).then(res => {
        this.list = res.data
        this.loading = false
      })
    },
    onYear(year) {
      this.year = year
      this.getMonths(year)
    },
    onMonth(month) {
      this.month = month
      this.list = []
      this.getData()
    },
    getMonths() {
      const now = new Date()
      const y = this.year ? this.year : now.getFullYear()
      let m = []
      for (let i = 1; i <= 12; i++) {
        m.push(i <= 9 ? `${y}0${i}` : `${y}${i}`)
      }
      this.monthArr = m
    }
  },
  onLoad() {
    if (this.$mp.query.month) {
      this.month = this.$mp.query.month
      this.year = parseInt(this.month.substring(0, 4))
      this.getMonths()
      this.getData()
    } else {
      uni.showToast({
        title: '缺少参数',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 2000)
    }
  },
  components: {
    Item,
    Loading
  }
}
</script>

<style lang="scss" scoped>
.year {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid #ebebeb;

  &-li {
    display: inline-block;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
    text-align: center;
    cursor: pointer;
    font-size: 28rpx;

    &.cur {
      color: #0084ff;
      border-bottom: 1px solid #0084ff;
    }
  }
}

.month {
  &-con {
    display: flex;
    background-color: #fff;
    padding: 10rpx 0;
    text-align: center;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;

    &__text {
      margin: 0 15rpx;
      padding: 0 20rpx;
      display: inline-block;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 5rpx;
      font-size: 24rpx;

      &.cur {
        color: #fff;
        background-color: #0084ff;
      }
    }
  }

  &-count {
    height: 60rpx;
    line-height: 60rpx;
    padding-left: 20rpx;
    font-size: 28rpx;
    color: #666;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;

    &__b {
      margin: 0 10rpx;
      font-weight: bold;
    }
  }
}
</style>
